<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
	<script type="text/javascript" src="${root}/static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#authcode").click(function() {
			var url = "${root}/auth/img?" + Math.random();
			$(this).attr("src", url);
		})

		$("input[type='submit']").click(function() {
			var uname = document.getElementById("uname");
			if (uname.validity.valueMissing) {
				uname.setCustomValidity("用户名不能为空");
			} else if (uname.validity.patternMismatch) {
				uname.setCustomValidity("用户名必须是5到20位有效字符");
			} else {
				uname.setCustomValidity("");
			}

			var upwd = document.getElementById("upwd");
			if (upwd.validity.valueMissing) {
				upwd.setCustomValidity("密码不能为空");
			} else if (upwd.value.length < 5) {
				upwd.setCustomValidity("密码长度不能少于5位");
			} else {
				upwd.setCustomValidity("");
			}

			/* var auth = document.getElementById("auth");
			if(auth.validity.valueMissing){
				auth.setCustomValidity("验证码不能为空");
			}else if(auth.value.length==4){
				//ajax请求 判断图片验证码是否正确
				var url = "${root}/auth/img";
				$.ajax({
					async:false,
					type:"post",
					data:{"auth":auth.value},
					dataType:"json",
					url:url,
					success:function(res){
						if(res.code==200){
							auth.setCustomValidity("");
						}else{
							auth.setCustomValidity(res.message);
						}
					},
					error:function(){
						alert('网络延时 请重试');
					}
				});
			}else{
				auth.setCustomValidity("验证码长度是4位");
			}  */

		});
	});
</script>
</head>
<body>
	<div class="container" style="margin-top: 50px;">
		<form action="${root}/user/login" method="post"
			class="form-horizontal">
			<fieldset>
				<legend style="text-indent: 5em;" class="text-info">
					<c:if test="${empty requestScope.message}">用户登录</c:if>
					<c:if test="${not empty requestScope.message}">${requestScope.message}</c:if>
				</legend>
				<div class="form-group">
					<label class="col-md-2 control-label text-right">用户名：</label>
					<div class="col-md-4">
						<input type="text" id="uname" name="uname" pattern="^\w{5,20}$"
							value="admin" required placeholder="请输入用户名" class="form-control" />
					</div>
					<p class="col-md-6 help-block">用户名不能为空</p>
				</div>
				<div class="form-group">
					<label class="col-md-2 control-label text-right">密码：</label>
					<div class="col-md-4">
						<input type="password" id="upwd" name="upwd" value="123456"
							required placeholder="请输入密码" class="form-control" />
					</div>
					<p class="col-md-6 help-block">密码不能为空</p>
				</div>
				<div class="form-group">
					<label class="col-md-2 control-label text-right">验证码：</label>
					<div class="col-md-2">
						<input type="text" id="auth" name="auth" required value="1234"
							placeholder="请输入图片验证码" class="form-control" />
					</div>
					<div class="col-md-2">
						<img id="authcode" style="cursor: pointer;" alt="" title="看不清楚换一张"
							src="${root}/auth/img" />
					</div>
					<p class="col-md-6 help-block">验证码不能为空</p>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label class="checkbox-inline"> <input type="checkbox"
							name="remember" value="true">记住我
						</label> </label>
					</div>
					<div class="col-md-4">
						<input type="submit" value="提交" class="btn btn-default" /> <input
							type="reset" value="重置" class="btn btn-default" /> 
					</div>
				</div>
			</fieldset>
		</form>
	</div>
</body>
</html>